<!-- markdown -->
<template>
	<div class="md">
	  <textarea :value="input" @input="update"></textarea>
	  <div v-html="compiledMarkdown"></div>
	 </div>
</template>
<script type="text/ecmascript-6">
  var marked = require('marked');
  var _ = require('lodash');
  export default {
	data() {
		return {
		input: '# 一号标题 \n## 二号标题 \n### 三号标题 \n#### 四号标题 \n##### 五号标题 \n###### 六号标题 \n> 这是引用 \n\n*** \n 1. 有序列表\n 2. 有序列表 \n 3. 有序列表'
		};
	},
		computed: {
		compiledMarkdown: function () {
			return marked(this.input, { sanitize: true });
		}
	},
	methods: {
		update: _.debounce(function (e) {
			this.input = e.target.value;
		}, 300)
	}
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  @import "../../common/stylus/md.styl"
.md
	margin: 0;
	height: 100%;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	color: #333; 
	div 
		display: inline-block;
		width: 49%;
		box-sizing border-box
		padding 20px
		vertical-align: top
		background-color: #f6f6f6;
		
	textarea
	  display: inline-block;
	  width 50%;
	  box-sizing border-box
	  padding 20px
	  border: none;
	  border-right: 1px solid #ccc;
	  resize: none;
	  outline: none;
	  background-color: #f6f6f6;
	  font-size: 14px;
	  font-family: 'Monaco', courier, monospace;
	  height 100%;

</style>